<template>
  <div class="course-preview">
    <el-button
      class="loading-button"
      v-loading.fullscreen.lock="loading"
      element-loading-text="加载中..."
    ></el-button>
    <ul class="search-bar">
      <li>
        <label>教学班名称：</label>
        <ht-input v-model="search.jxbmc"></ht-input>
      </li>
      <li>
        <label>课程名称：</label>
        <ht-select
          v-model="search.kcid"
          :options="kcOptions"
          filterable
        ></ht-select>
      </li>
      <li>
        <label>查看方式：</label>
        <ht-select
          v-model="search.showType"
          :options="lookTypeOptions"
          @change="lookTypeChange"
        ></ht-select>
      </li>
      <li>
        <label>教室名称：</label>
        <ht-select
          v-model="search.jsid"
          :options="jsOptions"
          filterable
        ></ht-select>
      </li>
      <li>
        <label>老师：</label>
        <ht-select
          v-model="search.jgid"
          :options="teacherOptions"
          filterable
        ></ht-select>
      </li>
      <li>
        <label>周：</label>
        <ht-select
          v-model="search.zc"
          :clearable="false"
          :options="zcOptions"
        ></ht-select>
      </li>
      <li>
        <label>行政班名称：</label>
        <ht-select
          v-model="search.xzbids"
          :options="xzbOptions"
          filterable
        ></ht-select>
      </li>
      <li>
        <label>课程性质：</label>
        <ht-select v-model="search.kcxz" :options="kcxzOptions"></ht-select>
      </li>
<!--      <li>
        <label>舒适度：</label>
        <ht-select
          v-model="search.type"
          :options="typeOptions"
          :clearable="false"
        ></ht-select>
      </li>-->
      <li>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button type="primary" @click="handleExport">导出</el-button>
      </li>
      <li>
          <label>总任务书：</label>
          <span>{{ editData.zrws}}</span>
      </li>
      <li>
          <label>已排任务书：</label>
          <span>{{ editData.zrws - editData.wprws}}</span>
      </li>
      <li>
          <label>未排任务书：</label>
          <span>{{ editData.wprws}}</span>
          &nbsp;&nbsp;&nbsp;&nbsp;<el-button type="primary" @click="openDialog" v-if="editData.wprws>0" >查看</el-button>
        </li>
    </ul>
    <div  class="week-table" v-if="search.showType == '1' && weekTableData.length>0">
        <el-table
                ref="htTable1"
                :data="weekTableData"
                border
                height="450"
                style="width: 100%"
                header-row-class-name="week-first"
                :span-method="arraySpanMethod"
        >
            <el-table-column label="时间段" align="center">
                <template slot-scope="scope">
                第{{scope.row.ksjs}}节
                </template>
            </el-table-column>
              <el-table-column
                      v-for="(subItem, subIndex) in weekList" :key="subIndex"
                      :label="subItem"
                      align="center"
              >
                  <template slot-scope="scope">
                      <div
                              class="class-item"
                              v-for="(third, thirdIndex) in scope.row.xqjCourses[subIndex+1]"
                              :key="thirdIndex"
                      >
                          <div class="class-name">{{ third.kcmc }}</div>
                          <div>{{ third.jxbmc }}</div>
                          <div>{{ third.jsmc }}</div>
                          <div>{{ third.jgxm }}</div>
                      </div>
                  </template>
              </el-table-column>
        </el-table>
    </div>
    <template v-if="search.showType == '2'">
      <el-table
        ref="htTable"
        :data="tableData"
        border
        height="450"
        style="width: 100%"
      >
        <el-table-column label="序号" type="index" width="55"></el-table-column>
        <el-table-column label="教学班名称" prop="jxbmc" align="center">
        </el-table-column>
        <el-table-column
          prop="kcmc"
          label="课程名称"
          align="center"
        ></el-table-column>
        <el-table-column prop="kcxz" label="课程性质" align="center">
            <template slot-scope="scope">
            {{ getKcxzName(scope.row.kcxz) }}
          </template>
        </el-table-column>
        <el-table-column prop="skddlx" label="上课地点类型" align="center">
          <template slot-scope="scope">
            {{ getPlaceName(scope.row.skddlx) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="jgxm"
          label="教师姓名"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="jsmc"
          label="教室名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="zc"
          label="周次"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="xqj"
          label="星期几"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="kjmc"
          label="时间段"
          align="center"
        ></el-table-column>
      </el-table>
      <el-pagination
        class="custom-pagination"
        background
        :current-page.sync="pageResult.page"
        :page-size="pageResult.pageSize"
        layout="prev, pager, next,sizes"
        :total="pageResult.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </template>
    <select-task-book
            ref="selectTaskBook"
            :editId="editData.pkjlid"
            :mapOptions="aicOptions"
            param-type="unUseTaskBook"
    ></select-task-book>
  </div>
</template>

<script>
import course from '@/api/course.js'
const selectTaskBook = () => import('./SelectTaskBook.vue')
export default {
  components: {
      selectTaskBook
  },
  props: {
    editId: String,
    editData: Object
  },
  data() {
    return {
      aicOptions: [], // 教务系统
      jsOptions: [],
      xzbOptions: [],
      teacherOptions: [],
      kcOptions: [],
      loading: false,
      kcxzOptions: [
        {key: 'majorNeed', value: '专业必修课'},
        {key: 'majorOptional', value: '专业选修课'},
        {key: 'publicNeed', value: '公共必修课'},
        {key: 'publicOptional', value: '公共选修课'}
      ],
      typeOptions: [
        {key: 'comfortCurriculumWeek', value: '舒适度排课'},
        {key: 'basicCurriculumWeek', value: '适应度排课'}
      ],
      weekList: [
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六',
        '星期天'
      ],
      pageResult: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      tableData: [],
      search: {
        type: 'comfortCurriculumWeek', // 舒适度
        showType: '2',
        zc: '1', // 周次
        jxbmc: '', // 教学班名称
        kcid: '', // 课程名称
        jsid: '', // 教室名称
        jgid: '', // 老师
        xzbids: '', // 行政班名称
        kcxz: '' // 课程性质
      },
      lookTypeOptions: [
        {key: '1', value: '课表'},
        {key: '2', value: '表格'}
      ],
      weekTableData:[],
    }
  },
  computed: {
    zdkj() {
      let zdkj = null
      if (this.editData && this.editData.pksx) {
        let arr = JSON.parse(Base64.decode(this.editData.pksx))
        let numberObj = arr.find(k => {
          return k.bm == 'maxClassPeriod'
        })
        zdkj = numberObj ? numberObj.sjz : null
        console.log('zlc numberObj', numberObj)
      }
      return zdkj
    },
    zcOptions() {
      let options = []
      if (this.editData && this.editData.pksx) {
        let arr = JSON.parse(Base64.decode(this.editData.pksx))
        let numberObj = arr.find(k => {
          return k.bm == 'semesterWeeks'
        })
        let number = numberObj ? numberObj.sjz : 20
        for (let i = 1; i <= number; i++) {
          options.push({
            key: String(i),
            value: `第${i}周`
          })
        }
      }
      return options
    }
  },
  created() {
    this.getTableData()
    this.getDicList();
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
       // 当前行row、当前列column、当前行号rowIndex、当前列号columnIndex
        if(columnIndex !== 0 && row.xqjCourses && row.xqjCourses[columnIndex] && rowIndex<this.weekTableData.length-1){
          let currentCours = row.xqjCourses[columnIndex];
          let nextCours = this.weekTableData[rowIndex+1].xqjCourses[columnIndex];
          if((!nextCours || nextCours.length === 0) && currentCours.length===1){
              if(currentCours[0].zjs > 1){
                  return {
                      rowspan: currentCours[0].zjs,
                      colspan: 1
                  };
              }
          }

          if(rowIndex>=1){
              // 当前为空 空   上一行不为空 并且为1
              let preCours = this.weekTableData[rowIndex-1].xqjCourses[columnIndex];
              if((!currentCours || currentCours.length === 0) && preCours.length===1){
                  if(preCours[0].zjs > 1){
                      return {
                          rowspan: 0,
                          colspan: 0
                      };
                  }
              }
          }
        }
        return {
            rowspan: 1,
            colspan: 1
        };
    },
    getPlaceName(key) {
      if (!key) {
        return ''
      }
      let obj = this.aicOptions.find(k => {
        return k.key == key
      })
      return obj ? obj.value : key
    },
    getKcxzName(key) {
      if (!key) {
        return ''
      }
      let obj = this.kcxzOptions.find(k => {
        return k.key == key
      })
      return obj ? obj.value : key
    },
    getDicList() {
      // 教学班 jxbjbsj 课程名称 kcjbsj 教师 jgjbsj 行政班基本数据 xzbjbsj 教室 jsjbsj 教务系统 aicdic
      course
        .getDicListByKeys('kcjbsj,jgjbsj,xzbjbsj,jsjbsj,aicdic')
        .then(res => {
          this.kcOptions = res.value.kcjbsj
          this.teacherOptions = res.value.jgjbsj
          this.xzbOptions = res.value.xzbjbsj
          this.jsOptions = res.value.jsjbsj
          this.aicOptions = res.value.aicdic
        })
    },
    lookTypeChange(val) {
      this.$nextTick(()=>{
          this.weekTableData = [];
          this.tableData = [];
      });
      this.pageResult.page = 1
      this.pageResult.pageSize = val == '1' ? -1 : 10
      this.getTableData()
    },
    handleExport() {
      let params = this.getSearchCondition()
      if (!params) return
      this.loading = true
      course
        .exportPreviewWeekCurriculum(params, this.editId, this.search.type)
        .then(
          res => {
            this.loading = false
          },
          err => {
            this.loading = false
          }
        )
    },
    handleSearch() {
      this.pageResult.page = 1
      this.getTableData()
    },
    getTableData() {
      let params = this.getSearchCondition()
      if (!params) return
      this.loading = true
      course.previewLesson(params, this.editId, this.search.showType).then(
        res => {
          this.loading = false
          if(this.search.showType === '2'){
              this.tableData = res.rows
          }
          if(this.search.showType === '1'){
              this.$nextTick(()=>{
                  this.weekTableData = res.rows
              });
          }
          this.pageResult.total = res.total
        },
        err => {
          this.loading = false
        }
      )
    },
    getSearchCondition() {
      if (
        this.search.showType == '1' &&
        !this.search.jxbmc &&
        !this.search.kcid &&
        !this.search.jsid &&
        !this.search.xzbids &&
        !this.search.jgid
      ) {
        this.$message.info(
          '教学班名称，课程名称，教室名称，老师，行政班名称需要至少填一个查询条件。'
        )
        return
      }
      let params = {
        pageBean: this.pageResult,
        querys: []
      }
      if (this.search.showType == '1') {
        params.pageBean.pageSize = -1
      }
      for (let key in this.search) {
        if (this.search[key] && key != 'type' && key != 'showType') {
          params.querys.push({
            group: 'main',
            operation: key == 'jxbmc' || key == 'xzbids' ? 'LIKE' : 'EQUAL',
            parentGroup: '',
            property: key,
            relation: 'AND',
            value: this.search[key]
          })
        }
      }
      return params
    },
    handleSizeChange(val) {
      //   每页条数
      this.pageResult.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      //   当前页
      this.pageResult.page = val
      this.getTableData()
    },
    openDialog() {
        this.$refs.selectTaskBook.showDialog()
    },
  }
}
</script>

<style lang="scss" scoped>
.course-preview {
  padding: 24px;
  .loading-button {
    position: absolute;
    left: -10000px;
  }
  .search-bar {
    display: flex;
    flex-wrap: wrap;
    li {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      width: 25%;
      label {
        width: 100px;
        text-align: right;
        margin-right: 10px;
      }
    }
  }
  /deep/ .week-table {
    width: 100%;
    border-right: 1px solid #666;
    border-bottom: 1px solid #666;
    border-collapse: collapse;
    .week-first {
      > th {
        width: 12%;
        border-left: 1px solid #666;
        border-top: 1px solid #666;
        background: #00c2ce;
        padding: 10px;
      }
    }
    tbody {
      tr:nth-child(2n-1) {
        background: #e9ecff;
      }
      td {
        .class-item {
          border-bottom: 1px dashed #666;
          padding-bottom: 10px;
          padding-top: 10px;
          .class-name {
            font-weight: bold;
          }
          > div {
            line-height: 22px;
          }
        }
        .class-item:last-child {
          border-bottom: none;
          padding-bottom: 0;
        }
      }
    }
    td {
      border-left: 1px solid #666;
      border-top: 1px solid #666;
      padding: 10px;
    }
  }

  .custom-pagination {
    margin-top: 16px;
    text-align: right;
  }
}
</style>
